<section class="section-padding bg-white">
  <div class="container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">
        {{ T "stats_section_title" }}
      </h2>

      <div>
        <div id="activeUsage" title="{{ T "stats_section_title" }}" class="w-full h-[400px]"></div>
      </div>

      <div class="text-center">
        <a href="/stats" class="btn btn-primary">
          {{ T "stats_section_button" }}
        </a>
      </div>

    </div>
  </div>
</section>

<span id="plot-translations"
    data-issued="{{ i18n "graph_issued" }}"
    data-certificates_active="{{ i18n "graph_certificates_active" }}"
    data-fully_qualified_domains_active="{{ i18n "graph_fully_qualified_domains_active" }}"
    data-registered_domains_active="{{ i18n "graph_registered_domains_active" }}"
    data-active_count="{{ i18n "graph_active_count" }}"
    data-issued_per_day="{{ i18n "graph_issued_per_day" }}"
    data-all_users="{{ i18n "graph_all_users" }}"
    data-usa_users="{{ i18n "graph_usa_users" }}"
    data-japan_users="{{ i18n "graph_japan_users" }}"
    data-percent_https="{{ i18n "graph_percent_https" }}"
></span>

<script src="/js/plotly-min.js" defer></script>
{{ if ne "en" .Page.Language.Lang }}
  <script src="/js/plotly-locale-{{ .Page.Language.Lang }}.js" defer></script>
{{ end }}
<script src="/js/stats.js" defer></script>
